Example

Drag-n-drop the form panel and toolbar

Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        items: [

            {

                xtype: 'toolbar',

                docked: 'top',

                title: 'Select Field',

                items: [

                    {

                        xtype: 'button',

                        id: 'GetSelectedValue',

                        itemId: 'mybutton',

                        text: 'Get Selected Value'

                    }

                ]

            },

            {

                xtype: 'fieldset',

                height: 100,

                instructions: 'Please select a product ',

                title: '',

                items: [

                    {

                        xtype: 'selectfield',

                        height: 41,

                        id: 'ProductList',

                        label: 'Product :',

                        options: [

                            {

                                text: 'MindStick Data Converter',

                                value: 'MindStick Data Converter'

                            },

                            {

                                text: 'MindStick Survey Manager',

                                value: 'MindStick Survey Manager'

                            },

                            {

                                text: 'MindStick Cleaner', 
                                value: 'MindStick Cleaner' 
                            } 
                        ] 
                    } 
                ] 
            } 
        ], 
        listeners: [ 
            { 
                fn: 'onGetSelectedValueTap', 
                event: 'tap', 
                delegate: '#GetSelectedValue' 
            } 
        ] 
    }, 
  
    onGetSelectedValueTap: function(button, e, eOpts) { 
        Ext.Msg.alert('Selected Product', Ext.getCmp('ProductList').getValue()); 
    } 
});